<template>
  <div v-loading="loading">
    <el-row>
      <el-form :model="form">
        <el-row>
          <el-form-item label="日期 : " style="width: 30%">
            <el-date-picker v-model="form.date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
          </el-form-item>
          <el-form-item label="客户料号 : " style="width: 50%" label-width="30%">
            <el-input v-model="form.productspec" placeholder="请输入客户料号" />
          </el-form-item>
          <el-form-item label="" style="width: 10%" label-width="30%">
            <el-button type="primary" :disabled="queryDisabled" @click="querySubmit">查询</el-button>
          </el-form-item>
          <el-form-item label="" style="width: 10%" label-width="30%" @click="getDataSubmit">
            <el-button type="primary" :disabled="reciveDisabled" @click="reciveSubmit">回传客户</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>

    <el-row>
      <el-table ref="tableRef" :data="tableData" border height="70vh" scrollbar-always-on>
        <el-table-column type="selection" :selectable="selectable" width="38" />
        <el-table-column property="oem_company" label="客户名" align="center" width="90px" />
        <el-table-column property="productspec" label="客户料号" align="center" width="250px" />
        <el-table-column property="inactualqty" label="投入数量" align="center" width="120px" />
        <el-table-column property="outactualqty" label="产出数量" align="center" width="120px" />
        <el-table-column property="state" label="上传状态" align="center" width="120px">
          <template v-slot="scop">
            <!-- <span>{{ scop.row.state }}</span> -->
            <el-tag v-if="scop.row.state == -1 || scop.row.state == null" type="info">未上传{{ scop.row.state }}</el-tag>
            <el-tag v-if="scop.row.state == 0" type="success">已上传{{ scop.row.state }}</el-tag>
            <el-tag v-if="scop.row.state == 1" type="warning">重复上传{{ scop.row.state }}</el-tag>
            <el-tag v-if="scop.row.state > 1" type="danger">上传失败{{ scop.row.state }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column property="producttime" label="统计时间" align="center" min-width="160px" />
        <el-table-column property="createtime" label="上传时间" align="center" min-width="160px" />
        <el-table-column property="updatetime" label="更新时间" align="center" min-width="160px" />
        <el-table-column property="remark" label="备注" align="center" min-width="260px" show-overflow-tooltip />
        <el-table-column property="createby" label="上传方式" align="center" min-width="120px" />
      </el-table>
    </el-row>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { querylist, receive } from '@/api/product/inoutday.js'
import { list } from '@/api/monitor/logininfor'

const states = reactive({
  form: {},
  tableData: []
})

const { form, tableData } = toRefs(states)
const tableRef = ref()
const loading = ref(false)

// tableData.value = [
//   // status为2时，状态为未上传
//   { name: '1', user: '1', state: -1, inactualqty: 1, outactualqty: 0 },
//   // status为0时，状态为已上传
//   { name: '1', user: '2', state: 0, inactualqty: 1, outactualqty: 0 },
//   // status为1时，状态为上传失败
//   { name: '2', state: 1, inactualqty: 1, outactualqty: 0 }
// ]

// 查询
const querySubmit = () => {
  if ([null, undefined].includes(form.value.date)) {
    tableData.value = []
    // alert('请输入日期')
    ElMessage({
      message: '请输入日期',
      type: 'error'
    })
  } else {
    // alert('查询成功')
    // ElMessage({
    //   message: '查询成功',
    //   type: 'success'
    // })
    loading.value = true
    tableData.value = []
    querylist({ ...form.value }).then((res) => {
      tableData.value = res.data
      loading.value = false
    })
  }
}

// 获得选中行的数据
const getDataSubmit = () => {
  let tempdata = tableRef.value.getSelectionRows()
  console.log(tempdata)
}
// 将表格中被选中的数据发送给服务器
const reciveSubmit = () => {
  loading.value = true
  tableData.value = []
  // 获得选中行的数据
  let tempdata = tableRef.value.getSelectionRows()
  // console.log(tempdata)
  receive({
    // date: form.value.date,
    // productspec: form.value.productspec.trim(),
    // data: tempdata
    data: tempdata
  }).then((res) => {
    querylist({
      ...form.value
    }).then((res) => {
      tableData.value = res.data
      loading.value = false
    })
  })
}

// 状态为未上传时，表格数据可以被选中
function selectable(row) {
  // return true
  return row.state != 0 && row.state != 1 && (row.inactualqty > 0 || row.outactualqty > 0)
}
</script>